import {
  BellOutlined,
  CompressOutlined,
  DownOutlined,
  ExpandOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from "@ant-design/icons";
import { useFullscreen } from "ahooks";
import { Avatar, Badge, Dropdown, MenuProps } from "antd";
import { useNavigate } from "react-router-dom";
import { useModel } from "umi";
const url = "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg";

const HeaderContent: React.FC = () => {
  const { name } = useModel("userInfo");
  const { collapsed, setCollapsed } = useModel("collapsed");
  const navigate = useNavigate();
  const containerRef = { current: document.getElementById("root") };
  const [isFullscreen, { toggleFullscreen }] = useFullscreen(containerRef);

  const onClick: MenuProps["onClick"] = ({ key }) => {
    if (key === "logout") {
      window.sessionStorage.clear();
      navigate("/login", { replace: true });
      // 刷新页面，释放缓存
      window.location.reload();
    } else if (key === "personal") {
      navigate("/personal");
    }
  };
  const handleCollapse = () => {
    setCollapsed(!collapsed);
  };
  const items: MenuProps["items"] = [
    {
      key: "personal",
      label: "个人中心"
    },
    {
      type: "divider"
    },
    {
      key: "logout",
      label: "退出登录"
    }
  ];
  return (
    <div className="headerContainer">
      <div className="leftHeader" style={{ display: "flex", alignItems: "center" }}>
        <span style={{ cursor: "pointer", marginRight: "20px" }} onClick={handleCollapse}>
          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </span>
        {/* <Breadcrumb></Breadcrumb> */}
      </div>
      <div className="rightHeader" style={{ display: "flex", alignItems: "center" }}>
        {/* 工具栏 */}
        <div className="toolsContainer" style={{ display: "flex", marginRight: "15px" }}>
          <span className="toolsIconBtn">
            <Badge dot>
              <BellOutlined style={{ color: "#606266" }} />
            </Badge>
          </span>
          <span className="toolsIconBtn" onClick={toggleFullscreen}>
            {isFullscreen ? <CompressOutlined /> : <ExpandOutlined />}
          </span>
        </div>

        {/* 个人信息 */}
        <Dropdown menu={{ items, onClick }} placement="bottom" arrow={{ pointAtCenter: true }}>
          <div style={{ display: "flex", alignItems: "center" }}>
            <Avatar size={24} src={url} />
            <div style={{ margin: "0 5px", fontSize: "14px" }}>{name}</div>
            <DownOutlined style={{ color: "#999", fontSize: "12px" }} />
          </div>
        </Dropdown>
      </div>
    </div>
  );
};

export default HeaderContent;
